<!-- 福利 -->
<script setup lang="ts">
import { ref } from 'vue'
import { getBanana, getStoryTask } from '@/api/getAxios';
import { useRouter } from 'vue-router';
import { showNotify } from 'vant';
import GetAd3 from '@/components/GetAd3.vue';

const $router = useRouter()
const banana = ref()
const day = ref()
const isload = ref(false)
const ticker = ref(-1)
const active = ref(0)
const list = ref(["日常任务", "新手任务"])
const taskType = ref(2)
const time = ref()
if (localStorage.getItem("isTick") == null) {
    localStorage.setItem("isTick", <any>0)
}
const showBottom = ref(false)
const data = ref()
//随机获取数组count条数据
const getData = function (arr: any[], count: number) {
    var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}
getBanana().then((res) => {
    banana.value = getData(res.data.data, 2)
})
const Day = function () {
    var myDate = new Date() // 获取今天日期
    if (localStorage.getItem("isTick") == String(myDate.getDate())) {
        ticker.value = 0
    }
    myDate.setDate(myDate.getDate())
    var dateArray = []
    var dateTemp
    var flag = 1
    for (var i = 0; i < 7; i++) {
        dateTemp = myDate.getDate()
        dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
    }
    day.value = dateArray
}
Day()
var myDate = new Date()
const tick = function () {
    time.value = myDate.getDate()
    if (isTick.value != time.value) {
        isload.value = true
        setTimeout(() => {
            $router.push('about/CheckOk')
            isload.value = false
            localStorage.setItem("isTick", time.value)
        }, 1000);
    } else {
        showNotify({ type: 'danger', message: '今天已签到' });
    }
}
const isTick = ref(localStorage.getItem("isTick"))

if (localStorage.getItem("isTick") == String(myDate.getDate())) {
    ticker.value = 0
} else {
    ticker.value = -1
}
const getS = function () {
    getStoryTask(<any>taskType.value).then((res) => {
        data.value = res.data.data.list
    })
}
getS()
const onChange = function () {
    if (active.value == 0) {
        taskType.value = 2
    } else {
        taskType.value = 1
    }
    getS()
}
</script>

<template>
    <router-view></router-view>
    <div class="app" v-if="$route.meta.show">
        <p style="font-size: 1.1rem;margin-top: 10px;">发现</p>
        <div class="main">
            <ul>
                <li @click="$router.push('/Ranking')">
                    <p><img src="../../assets/img/排行.png" alt=""></p>
                    <p>排行</p>
                </li>
                <li @click="$router.push('/Taking')">
                    <p><img src="../../assets/img/话题.png" alt=""></p>
                    <p>话题</p>
                </li>
                <li @click="$router.push('/AuthorPage')">
                    <p><img src="../../assets/img/人.png" alt=""></p>
                    <p>大神</p>
                </li>
                <li @click="$router.push('/Like')">
                    <p><img src="../../assets/img/聚收藏gift.png" alt=""></p>
                    <p>收藏</p>
                </li>
            </ul>
            <div class="tick">
                <button @click="tick()">签到</button>
                <ul>
                    <li v-for="(item, index) in day" :class="{ on: index == ticker }">{{ item }}</li>
                </ul>
            </div>
            <GetAd3 />
            <ul class="banana">
                <li v-for="item in banana">
                    <img :src="item.pic" alt=""
                        @click="$router.push({ path: '/BookInfo', query: { storyId: item.targetId } })">
                </li>
            </ul>
            <div class="storyTask">
                <h1>😘 做任务，领福利</h1>
                <van-tabs v-model:active="active" @change="onChange">
                    <van-tab v-for="item in list" :title="item">
                        <div v-for="task in data">
                            <p>{{ task.name }}</p>
                            <p>{{ task.note }}</p>
                            <p><img src="../../assets/img/卡券包.png" alt="">{{ task.giveGold }}火星券</p>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
        <loading v-show="isload" />
        <div class="pack">
            <p><img src="../../assets/img/红包-copy.png" alt="" @click="showBottom = true"></p>
        </div>
        <van-popup v-model:show="showBottom">
            <RedPack />
        </van-popup>
    </div>
</template>


<style scoped lang="less">
.app {
    text-align: center;
    padding: 10px;
    font-family: var(--mfont);

    .main {
        margin-top: 26px;

        >ul:nth-of-type(1) {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: white;
                border-radius: 10px;
                width: 80px;
                height: 80px;
                justify-content: center;
                transition: all 0.1s;
                box-shadow: 0 0 10px -6px gainsboro;

                img {
                    width: 26px;
                }

                &:active {
                    background-color: whitesmoke;
                }

                p:nth-child(1) {
                    font-size: 1.8rem;
                }

                p:nth-child(2) {
                    font-size: .9rem;
                    color: #4b4b4b;
                    margin-top: 8px;
                }
            }

            li:nth-child(2) {
                img {
                    width: 28px;
                }
            }
        }
    }

    .tick {
        margin-top: 40px;

        button {
            height: 80px;
            width: 80px;
            border-radius: 50%;
            border: 0;
            background-color: rgba(197, 16, 16, 0.6);
            box-shadow: 0 0 13px -2px rgba(197, 16, 16, 0.7);
            color: whitesmoke;
            transition: all 0.1s;

            &:active {
                opacity: 0.9;
            }
        }

        p:nth-child(2) {
            font-size: .9rem;
            color: #888;
            margin-top: 18px;
        }

        ul {
            display: flex;
            margin-top: 18px;
            justify-content: center;

            li {
                background-color: white;
                border-radius: 8px;
                padding: 14px 12px;
                margin: 0 4px;
            }
        }
    }

    .banana {
        display: flex;
        margin-top: 24px;
        border-radius: 8px;

        li {
            width: 100%;
            margin: 0 4px;

            img {
                width: 100%;
                border-radius: 8px;

                &:active {
                    opacity: 0.8;
                }
            }
        }
    }
}

.storyTask {
    margin-top: 30px;
    margin-bottom: 50px;

    h1 {
        font-size: 1.2rem;
        margin: 20px 0;
    }

    div {
        margin: 10px 0;
        display: flex;
        flex-direction: column;

        div>div>div {
            background-color: white;
            margin: 4px 0;
            padding: 16px;
            border-radius: 8px;
            transition: all 0.2s;

            &:active {
                background-color: whitesmoke;
            }
        }

        img {
            width: 18px;
            margin-right: 4px;
        }

        p {
            text-align: left;
        }

        p:nth-child(1) {
            font-size: 1rem;
        }

        p:nth-child(2) {
            margin: 8px 0;
            color: #535353;
            font-size: .9rem;
        }

        p:nth-child(3) {
            font-size: .85rem;
            color: darkgoldenrod;
            display: flex;
            align-items: center;
        }
    }
}

.on {
    background-color: var(--mcolor) !important;
    color: whitesmoke;
}

.pack {
    position: fixed;
    right: 18px;
    bottom: 60px;

    img {
        width: 56px;
        animation: move2 1.5s infinite ease-in-out alternate;
    }

    @keyframes move2 {
        0% {
            transform: rotate(0);
        }

        50% {
            transform: rotate(15deg);
        }

        100% {
            transform: rotate(-15deg);
        }
    }

    button {
        border: 0;
        position: absolute;
        right: 4px;
        top: 2px;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        text-align: center;
        font-size: .75rem;
        color: rgba(0, 0, 0, 0.2);
        border: 1px solid;
    }
}

.van-popup {
    background-color: transparent;
}
</style>
